<div class="box-container">
    <div class="search-wrap">
        <div class="time-picker-wrap">
            年份：
            <nz-year-picker
                [(ngModel)]="year"
                [nzDisabledDate]="disabledDate"
                (ngModelChange)="queryInfo()">
            </nz-year-picker>
        </div>

        <div class="button-wrap">
            <button nz-button nzType="primary">打印</button>
            <button nz-button nzType="primary">导出</button>
        </div>

    </div>

    <div class="main-container">
            <div class="main-content">
                <div class="main-content-wrap">
                    <div class="left-panel">
                        <ul nz-menu nzMode="inline" class="hr-statistics-left-menu">
                            <li nz-menu-item
                                *ngFor="let item of listData; let idx = index"
                                [nzSelected]="idx === 0"
                                (click)="selectedAreaChanged(item.id)">
                                {{item.name}}
                            </li>
                        </ul>
                    </div>

                    <div class="right-panel">
                        <div class="right-top-box">

                            <div class="right-content">
                                <nz-card [nzTitle]="stationName + '作物种植结构'"
                                         class="row-card">
                                    <div
                                        echarts
                                        [options]="baseOpt"
                                        [merge]="irrOptChange"
                                        style="height: 291px;"
                                    ></div>

                                    <nz-table
                                        #dataTable
                                        nzBordered
                                        [nzData]="tableData"
                                        nzSize="middle">
                                        <thead>
                                        <tr>
                                            <th>名称</th>
                                            <th>灌区合计</th>
                                            <th *ngFor="let name of tableHead">{{ name }}</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr *ngFor="let row of dataTable.data">
                                            <td>{{ row.cropName }}</td>
                                            <td>{{ row.irrTotal }}</td>
                                            <td *ngFor="let name of tableHead">{{ row[name] }}</td>
                                        </tr>
                                        </tbody>
                                    </nz-table>
                                </nz-card>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
    </div>

</div>
